<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/template.js"></script>
    <script>
        $(function () {
            $.getJSON("/role/getall",function (roles){
                  // for(let role of roles){
                      var html = template('roleTpl', {"roles":roles});
                      console.log(html);
                      $("#roleTable").append(html);
                  // }
            })

            $("#addBtn").click(function () {
                let role = {
                    "name": $("#name").val(),
                    "description": $("#description").val()
                };
                $.post("/role/add", role, function (r) {
                    console.log(r);
                });
            });
        })
    </script>
</head>
<body>
<script id="roleTpl" type="text/html">
    {{each roles as role i}}
            <tr>
                <td></td>
                <td>{{role.name}}</td>
                <td>{{role.description}}</td>
                <td></td>
            </tr>
    {{/each}}
</script>
<table id="roleTable">
    <tr>
        <th><input type="checkbox"></th>
        <th>角色名</th>
        <th>角色描述</th>
        <th>操作</th>
    </tr>
</table>

名称:<input type="text" id="name" name="name"> <br>
描述:<input type="text" id="description"> <br>
<input type="button" value="增加" id="addBtn">
</body>
</html>
